<template>
	<view>
		<image @click="hanldeCollect" class="navber-right"
			:src="isCollect ? '/static/image/has-like.png':'/static/image/no-like.png' " mode="">
		</image>
	</view>
</template>

<script setup>
	import { ref, watch } from 'vue';
	import { favoriteWorkerAdd, favoriteWorkerCheck, favoriteWorkerDel } from '@/api/index.js';

	defineOptions({
		name: "isCollect"
	});

	const isCollect = ref(false);
	const props = defineProps({
		workerId: {
			type: [String, Number],
			default: 0
		}
	})

	// 监听数据
	watch(props, (newValue) => {
		if (newValue.workerId != 0) {
			favoriteWorkerCheck({ worker_ids: [newValue.workerId] }).then(res => {
				if (res.code == 200) {
					isCollect.value = res.data.favor_worker_ids.includes(newValue.workerId);
				}
			})
		}
	}, {
		deep: true,
		immediate: true
	});


	// 添加取消收藏
	const hanldeCollect = () => {
		if (isCollect.value) {
			isCollect.value = false;
			favoriteWorkerDel({
				worker_id: props.workerId
			}).then(res => {
				if (res.code == 200) {
					uni.$u.toast(res.msg);
				}
			})
		} else {
			isCollect.value = true;
			favoriteWorkerAdd({
				worker_id: props.workerId
			}).then(res => {
				if (res.code == 200) {
					uni.$u.toast(res.msg);
				}
			})
		}

	}
</script>

<style lang="scss" scoped>
	.navber-right {
		width: 48rpx;
		height: 48rpx;
	}
</style>